<template>
  <div>
    <el-dialog class="dia-style" :title="title" :visible.sync="isOpen" width="60%" append-to-body>
      <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="作业名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入作业名称"/>
        </el-form-item>
        <el-form-item label="作业类型" prop="decoding">
          <el-radio-group v-model="formData.decoding">
            <el-radio-button label="被动采集"></el-radio-button>
            <el-radio-button label="主动采集"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="接入产品" prop="product">
          <el-button icon="el-icon-thumb" @click="handleSelectData">请选择</el-button>
          <el-table :data="importProduct" :header-cell-style="{ background: '#F3F5FC' }">
            <el-table-column label="序号" align="center" width="50">
              <template slot-scope="scop">
                {{ scop.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="任务名称" prop="name" :show-overflow-tooltip="true"/>
            <el-table-column label="接入数据源" prop="productName" :show-overflow-tooltip="true" />
            <el-table-column label="输出数据源" prop="companyName" />
            <el-table-column label="运行状态" align="center"  prop="versionName">
            </el-table-column>
            <el-table-column label="操作"  align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                    @click="handleDelete(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-row v-if="formData.decoding=='主动采集'">
          <el-col :span="24">
            <el-form-item label="执行方式" prop="executionMode">
              <el-radio-group v-model="formData.executionMode">
                <el-radio :label="1">周期性执行</el-radio>
                <el-radio :label="2">定期执行</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执行配置">
              <div>
                <span>每 </span>
                <template v-if="formData.executionMode==1">
                    <el-input-number style="margin:0  10px 0 0" v-model="formData.cycleTime" controls-position="right" :min="1" :max="60"></el-input-number>
                  <el-select v-model="formData.cycleNode" placeholder="请选择">
                     <el-option
                      v-for="item in cycleNodeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
                <template v-if="formData.executionMode==2">
                  <el-select v-model="formData.timeNode" style="margin:0  10px 0 0"  placeholder="请选择">
                    <el-option
                      v-for="item in timeNodeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-select v-model="formData.times" placeholder="请选择">
                    <el-option
                      v-for="item in timesOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
                <span> 执行一次</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>
    <EditDialog ref="addRef" title="新增"></EditDialog>
    <SelectDialog ref="selectRef" title="选择接入数据"></SelectDialog>
  </div>
</template>

<script>
//  模拟数据
import prodocutType from '@/views/accessProduct/mockData/prodtctType.json'
import EditDialog from '@/components/accessProduct/EditProduct'
import SelectDialog from '@/components/accessProduct/gatherData/SelectDialog'

export default {
  name: 'editDialog',
  components: { EditDialog, SelectDialog },
  props: {
    title: {
      type: String,
      default() {
        return '编辑'
      }
    },
    open: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      isOpen: this.open,
      formData:{
        executionMode:1,
        decoding:'主动采集',
        name:'',
        cycleTime:0,
        timeNode:'',
        times:'',
        cycleNode:'',
      },
      cycleNodeOption:[{
        label: '分钟',
        value: 'minute'
      },{
        label: '小时',
        value: 'hour'
      }],
      timeNodeOptions: [{
        label: '每天',
        value: 'day'
      }, {
        label: '每周',
        value: 'week'
      }, {
        label: '每月',
        value: 'month'
      }],
      timesOptions: [{
        label: '15:00',
        value: '1'
      }, {
        label: '16:00',
        value: '2'
      }, {
        label: '17:00',
        value: '3'
      }, {
        label: '18:00',
        value: '4'
      }, {
        label: '19:00',
        value: '5'
      }],
      showAddDialog: false,
      showSelectDialog: false,
      options: prodocutType,
      importProduct: [{
        name: '终端对比-三合一数据接入',
        productName: '终端对比-三合一数据接入',
        companyName: '终端对比-三合一数据接入',
        versionName: '关闭'
      }],
      // 表单参数
      rules: {
        name: [
          { required: true, message: '作业名称不能为空', trigger: 'blur' }
        ],
        way: [
          { required: true, message: '请选择作业类型', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    open: {
      handler(newValue) {
        this.isOpen = newValue
      }
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
            this.$modal.msgSuccess('修改成功')
            this.isOpen = false
        }
      })
    },
    // 取消按钮
    cancel() {
      this.isOpen = false
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const name = row.name
      this.$modal.confirm('是否确认删除角色编号为"' + name + '"的数据项？').then(function() {
        return true
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    handleAddProduct() {
      this.$refs.addRef.isOpen = true
    },
    /**  点击 ‘请选择’ **/
    handleSelectData() {
      this.$refs.selectRef.isOpen = true
    },
    /**  关闭弹窗 **/
    handleSelectOpen(value) {
      this.showSelectDialog = value
    }
  }
}
</script>

<style lang="scss" scoped>

.el-cascader {
  width: 100%;
}

.dialog-footer {
  width: 100% !important;
  display: block !important;
}

.el-form-item__label {
  width: 140px !important;
}

.el-form-item__content {
  margin-left: 140px !important;
}
</style>
